<template>
  <div class="singer">
    <!--引入组件 -->
    <listview :data="singer"  @select="selectSinger"></listview>
    <!--挂载子路由 -->
    <router-view></router-view>
  </div>
</template>
<script>
import {getSingerList} from  '@/api/singer.js';
import {common} from '@/util/common.js';
import axios from '@/util/axios.js';
import Singer from '@/js/singer.js';
//中英文转换
import han from 'han';
//歌手列表
import listview from '@/components/base/listview/listview.vue';
import {mapMutations} from 'vuex';

let HOT_NAME = '热门';
let HOT_SINGER_LEN = 10;
let name_arr = []; //临时集合

export default {
  data() {
    return {
      singer: [],
      key: [], // 字母key
      listData: [] // 列表数据
    };
  },
  created() {
    this._getSingerList();
  },
  components: {
    listview
  },
  computed: {

  },
  methods: {

    //进入歌手详情页
    selectSinger(singer) {
      console.log(singer);
      // 编程式路由跳转
      this.$router.push({
        path: `/singer/:${singer.id}`
      })
      //采用函数调用的方式提交mutations修改的内容,相当于 this.$store.commit()方法,
      this.setSinger(singer);
    },

    // 方法一
    _getSingerList() {
      console.log('----开始执行singerList的集合----');
      getSingerList().then((res) => {
        if (res.code === common.SUCC_OK) {
          this.listData = res.singerList.data.singerlist;
          this.key = res.singerList.data.tags.index;
          // 封装数据结构
          this.singer = this. _initDataConstruct(this.listData, this.key);
          //console.log(this._initDataConstruct(this.listData));
        }
      });
    },

    //方法二:网易云音乐 NodeJS 版API
    _getSingerList2: async function () {
      const  res = await axios.post('/toplist/artist');
      console.log(res);
    },
    
    // 封装数据结构
    _initDataConstruct(list) {
      //定义一个map对象
      let map = {
        // hot对象
        hot: {
          id: HOT_NAME,
          items:[] //热门数据
        }
      }

      // 循环原生数据
      list.forEach((item,index) => {
        if(index < HOT_SINGER_LEN) {
          // map.hot.items.push({
          //   singer_id : item.singer_id,
          //   singer_name: item.singer_name,
          //   singer_pic:`http://y.gtimg.cn/music/photo_new/T001R150x150M000${item.singer_mid}.webp`
          // });
          // 通过new singer类封装对象
        map.hot.items.push(new Singer({
            id : item.singer_id,
            name: item.singer_name,
            mid: item.singer_mid
          }));
        }

        // 将list的数据依照ASCII存放到name_arr集合中
          let han_name =  han.letter(item.singer_name);
          const key = han_name.charAt(0).toUpperCase();//获取名字的首字母han_name.charAt(0) 剩余部分: han_name.substr(1)
          // 若不存在  
          if(!map[key]){
            map[key] = {
              id: key,
              items:[]
            }
          }
          map[key].items.push(new Singer({
            id : item.singer_id,
            name: item.singer_name,
            mid: item.singer_mid
          }));
      });
      
     //console.log(map);
    //为了得到有序列表 我们需要处理map
    let hot = [];
    let ret = [];
    for(let key in map){
      let val = map[key];
      if(val.id.match(/[a-zA-Z]/) && val.items.length > 0) {
        ret.push(val);
      }else if (val.id === HOT_NAME) {
        hot.push(val);
      }
    }
    //数组sort进行排序
    ret.sort((a,b) => {
      return a.id.charCodeAt(0) - b.id.charCodeAt(0)
    })
    // 返回一维数组
    return hot.concat(ret);
   },

   // 修改mutations的内容并提交
   ...mapMutations({
     setSinger: 'SET_SINGER'
   })

  }
};

</script>

<style lang="scss" rel="stylesheet/scss">
  @import "@/assets/style/mixin.scss";
.singer {
  position: fixed;
  top: 88px;
  width: 100%;
  bottom: 0;
}
</style>
